<template>
  <div class="tags">
    <el-tag
      v-for = "(item,index) in tags"
      :key = "item.path"
      :effect = "$route.name === item.path ? 'dark' : 'plain'"
      :closable = "item.path !== 'index'"
      @click = "changeMenu(item)"
      @close = "handleClose(item,index)">
      {{ item.authName }}
    </el-tag>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  name: 'VueShopTags',

  data() {
    return {
			editableTabsValue:'1',
    };
  },
	computed: {
		...mapState({
			tags: state => state.tab.tabsList
		})
	},
  methods: {
    ...mapMutations(['closeTag']),
    // tag标签跳转
		changeMenu (item) {
			this.$router.push({
				path: item.path
			})
		},
    // 点击tag删除功能
		handleClose (item, index) {
			// 调用store中的mutation
			this.closeTag(item)
			// 获取删除之后tags的长度
			const length = this.tags.length;
			// 删除之后的状况
			if (item.path !== this.$route.name) {
				return
			}
			// 表示的是删除的最后一项
			if (index === length) {
				this.$router.push({
					name: this.tags[index - 1].path
				})
			} else {
				this.$router.push({
					name: this.tags[index].path
				})
			}
		}
  },
};
</script>

<style lang="less" scoped>
.tags {
  .el-tag {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>